window.onload = function () {
    // 商品项类
    class Item {
        constructor(id, name, price, quantity, image) {
            this.id = id;
            this.name = name;
            this.price = price;
            this.quantity = quantity;
            this.selected = false;
            this.image = image;
        }
        getSubtotal() {
            return this.price * this.quantity;
        }
    }

    // 购物车类
    class Cart {
        constructor() {
            this.items = [];
        }
        // 添加商品
        addItem(item) {
            this.items.push(item);
        }
        // 计算已选商品的总数
        getTotalCount() {
            return this.items.reduce((total, item) => total + (item.selected ? item.quantity : 0), 0);
        }
        // 计算已选商品的总价
        getTotalPrice() {
            return this.items.reduce((total, item) => total + (item.selected ? item.getSubtotal() : 0), 0);
        }
        // 渲染购物车
        render() {
            const cartItemsContainer = document.getElementById('cartItems');
            cartItemsContainer.innerHTML = '';
            this.items.forEach(item => {
                const row = document.createElement('tr');

                row.innerHTML = `
                <td><input type="checkbox" class="item-checkbox" data-item-id="${item.id}" ${item.selected ? 'checked' : ''}></td>
                <td><img src="${item.image}" alt="${item.name}" style="width: 80px; height: 80px;"></td>
                <td>${item.name}</td>
                <td>${item.price.toFixed(2)}</td>
                <td><input type="number" class="item-quantity" value="${item.quantity}" data-item-id="${item.id}" min="1"></td>
                <td>${item.getSubtotal().toFixed(2)}</td>
                <td><button class="remove-item" data-item-id="${item.id}">删除</button></td>
            `;

                cartItemsContainer.appendChild(row);
            });
            this.updateSummary();

            // 绑定事件监听器
            this.bindEvents();
        }

        // 更新购物车摘要
        updateSummary() {
            document.getElementById('selectedCount').textContent = this.getTotalCount();
            document.getElementById('totalPrice').textContent = this.getTotalPrice().toFixed(2);
        }

        // 绑定事件监听器
        bindEvents() {
            // 监听商品复选框变化
            const checkboxes = document.querySelectorAll('.item-checkbox');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', () => {
                    const itemId = checkbox.getAttribute('data-item-id');
                    const item = this.items.find(item => item.id === parseInt(itemId));
                    if (item) {
                        item.selected = checkbox.checked;
                        this.updateSummary();
                    }
                });
            });
            // 监听商品数量变化
            const quantityInputs = document.querySelectorAll('.item-quantity');
            quantityInputs.forEach(input => {
                input.addEventListener('input', () => {
                    const itemId = input.getAttribute('data-item-id');
                    const item = this.items.find(item => item.id === parseInt(itemId));
                    if (item && input.validity.valid) {
                        item.quantity = parseInt(input.value);
                        this.updateSummary();
                    }
                });
            });
            // 监听删除按钮
            const removeButtons = document.querySelectorAll('.remove-item');
            removeButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const itemId = button.getAttribute('data-item-id');
                    this.items = this.items.filter(item => item.id !== parseInt(itemId));
                    this.render();
                });
            });
            // 监听全选/反选复选框
            document.getElementById('selectAllCheckbox').addEventListener('change', () => {
                this.items.forEach(item => {
                    const checkbox = document.querySelector(`[data-item-id="${item.id}"]`);
                    if (checkbox) {
                        checkbox.checked = document.getElementById('selectAllCheckbox').checked;
                        item.selected = checkbox.checked;
                    }
                });
                this.updateSummary();
            });
        }
    }

    // 示例：添加一些商品到购物车
    const cart = new Cart();
    cart.addItem(new Item(1, '星河璀璨', 168.88, 1, '../images/s1.jpg'));
    cart.addItem(new Item(2, '金色暖阳', 384.68, 1, '../images/s2.jpg'));
    cart.addItem(new Item(3, '爱情-星辰大海', 298.77, 1, '../images/s3.jpg'));
    cart.addItem(new Item(4, '福气满满', 499.00, 1, '../images/sc43.jpg'));
    cart.addItem(new Item(5, '一路向阳', 298.00, 1, '../images/s9.jpg'));
    cart.render(); // 渲染购物车
    
    //结算
    const checkoutButton = document.getElementById('checkoutButton');
        checkoutButton.addEventListener('click', function() {
            const totalPrice = document.getElementById('totalPrice').textContent;
            alert(`结算成功！花费了 ${totalPrice} 元`);
        });
}